import './styles/index.less';
import { Button, Card, Input } from 'antd';
import logo from './assets/logo.png';
import Forms from './forms';
import { Navigate, useActionData } from 'react-router';
import { useEffect } from 'react';
import { AxiosResponse } from 'axios';
import { HttpResource } from 'src/models/http-resource';
import { SignResponseVo } from 'src/models/sign-response-vo';
import { useRecoilState } from 'recoil';
import { appUserStore } from 'src/App.store.ts';

const { Form, Item } = Forms;

export const Element = () => {
  const actionData = useActionData() as AxiosResponse<
    HttpResource<SignResponseVo>
  >;

  const [state, setState] = useRecoilState(appUserStore);

  useEffect(() => {
    if (actionData?.data?.code === '200') {
      setState(actionData?.data?.data);
    }
  }, [actionData, setState]);

  if (state) {
    return <Navigate to="/" />;
  }

  return (
    <div className="page_sign-in">
      <div className="page_sign-in-container">
        <div className="layout">
          <div className="banner">
            <div className="logo">
              <img alt="logo" src={logo} />
            </div>
            <div className="project">资产管理系统</div>
          </div>

          <Card title="登录" className="form">
            <Form layout="vertical">
              <Item name="username">
                <Input />
              </Item>

              <Item name="password">
                <Input type="password" />
              </Item>
              <Button type="primary" htmlType="submit" children="提交" block />
            </Form>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default Element;
